<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SADARI</title>

<link rel="stylesheet"
	href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<style>
body { font-size: 80%;  }

#characterList { list-style-type: none; margin: 0; padding: 0; width: 240px; }
#characterList li { margin: 3px; padding: 1px; float: left; width: 110px; height: 100px; font-size: 4em; text-align: center; }

#confirm-character, #confirm-form  { display: inline-block; vertical-align: top; }
#confirm-character { margin: 5px; width: 120px }
  
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }

.centered { text-align: center; margin: auto; }
</style>

</head>
<body>

	<h1 class="">Welcome</h1>
	<div id="user-input">
	  <p>사용할 캐릭터를 선택하세요.</p>
	  <ol id="characterList">
	  	<li class="character" onclick="selectCharacter('0')"><img src="images/ch_0.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('1')"><img src="images/ch_1.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('2')"><img src="images/ch_2.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('3')"><img src="images/ch_3.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('4')"><img src="images/ch_4.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('5')"><img src="images/ch_5.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('6')"><img src="images/ch_6.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('7')"><img src="images/ch_7.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('8')"><img src="images/ch_8.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('9')"><img src="images/ch_9.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('10')"><img src="images/ch_10.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('11')"><img src="images/ch_11.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('12')"><img src="images/ch_12.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('13')"><img src="images/ch_13.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('14')"><img src="images/ch_14.png" height="100px"></li>
	  	<li class="character" onclick="selectCharacter('15')"><img src="images/ch_15.png" height="100px"></li>  	
	  	<li class="character" onclick="selectCharacter('16')"><img src="images/ch_16.png" height="100px"></li>
	  </ol>
	</div>

	<div id="dialog-confirm" title="용사여.. 당신의 이름을 알려주세요..">		
		<div id="confirm-character"></div>
		<div id="confirm-form">
			<form id="form" action="./note" method="POST">
				<label for="name">이름</label>
				<input type="text" name="name" id="name">
				<input type="hidden" name="character" id="character">
			</form>
		</div>
	</div>

	<script>
		$(function() {
			
			$("#dialog-confirm").dialog({
				autoOpen: false,
				width: "340px",
				buttons:[{text:"결정", click: function(){
					if(!$("#name").val()){
						$("#name").focus();
						return;
					}

					$("#form").submit();
					
				}}]
			});
			
		});
		
		function selectCharacter(num){
			$("#character").val(num)
			$("#confirm-character").empty().append("<img src='images/ch_"+num+".png' height='100px'>");
			$("#dialog-confirm").dialog("open");
			
		}
	</script>

</body>
</html>